"use client"
import React, { useEffect, useState } from 'react';
import type { TableColumnsType, TableProps } from 'antd';
import { Button, Space, Table, message, Popconfirm, Modal } from 'antd';
import {
  CheckCircleFilled,
  EditFilled,
  VerticalAlignTopOutlined,
  DeleteFilled,
  SearchOutlined,
  RedoOutlined,
  ZoomInOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';

import { http_get, http_del, searchd } from '../../api/http';

import Myform from './Myform';

import Breadcrumb from '../../../../../component/mbx'


import {
  ProFormDatePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';

type OnChange = NonNullable<TableProps<DataType>['onChange']>;
type Filters = Parameters<OnChange>[1];

type GetSingle<T> = T extends (infer U)[] ? U : never;
type Sorts = GetSingle<Parameters<OnChange>[2]>;

interface DataType {
  "id": number,
  "title": string,
  "name": string
  "stage": string,
  "total": number,
  "price": number,
  "time": string,
  "day": number,
}




const Homes: React.FC = () => {


  const [data, setData] = useState<DataType[]>([])

  useEffect(() => {
    function Demo() {
      http_get().then(res => {
        setData(res)
      })
    }

    Demo()
  }, [])

  // 删除

  async function del(id: number) {
    try {
      await http_del(id)
      const newData = data.filter(item => item.id !== id)
      setData(newData)
    } catch (error) {
      console.log('删除失败', error)
    }
  }

  // 置顶
  const handTop = (id: number) => {
    // 找到要置顶数据
    const taritem = data.find(item => item.id == id)
    // 过滤掉要置顶的数据
    const newlist = data.filter(item => item.id !== id)
    setData([taritem, ...newlist])
  }


  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('添加')
  const [objitem, setObjitem] = useState({})

  const showModal = () => {
    setIsModalOpen(true);
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };




  const columns: TableColumnsType<DataType> = [
    {
      title: '商机标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '关联客服',
      dataIndex: 'name',
    },
    {
      title: '商业阶段',
      dataIndex: 'stage',
    },
    {
      title: '播报记录',
      dataIndex: 'total',
    },
    {
      title: '报价总金额',
      dataIndex: 'price',

    },

    {
      title: '最后跟进',
      dataIndex: 'time',
      render: (time) => {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      },
    },
    {
      title: '未跟进天数',
      dataIndex: 'day',
    },

    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a><CheckCircleFilled />跟进</a>
          <a onClick={() => {
            showModal()
            setTitle('编辑')
            setObjitem(record)
          }}><EditFilled />编辑</a>
          <a onClick={() => {
            handTop(record.id)
          }}><VerticalAlignTopOutlined />置顶</a>
          <Popconfirm
            title="删除"
            description="确定要删除当前内容吗"
            onConfirm={() => del(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <a><DeleteFilled />删除</a>
          </Popconfirm>

        </Space>
      ),
    },
  ];

  return (
    <>


      <Button type="primary" onClick={() => {
        showModal()
        setTitle('添加')
        setObjitem({})
      }}>
        添加
      </Button>
      <Modal footer={''} title={title} open={isModalOpen} onCancel={handleCancel}>
        <Myform title={title} onCancel={handleCancel} data={data} setData={setData} objitem={objitem} key={new Date().getTime()} />
      </Modal>

      <Space style={{ marginBottom: 16 }}>

      </Space>

      <QueryFilter defaultCollapsed split onFinish={(v) => {
        searchd(v).then(res => {
          setData(res)
        })
      }}>
        <ProFormText name="title" label="商机标题" />
        <ProFormText name="name" label="关联客服" />
      </QueryFilter>
      <Table<DataType> columns={columns} dataSource={data} />


    </>
  );
};

export default Homes;